<template>
  <div class="area-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>区域管理</span>
          <el-button type="primary" @click="handleAdd">新增区域</el-button>
        </div>
      </template>
      
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="关键词">
          <el-input v-model="searchForm.keyword" placeholder="区域名称/编码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      
      <el-table :data="areaList" style="width: 100%" row-key="id" v-loading="loading">
        <el-table-column prop="areaName" label="区域名称" />
        <el-table-column prop="areaCode" label="区域编码" />
        <el-table-column prop="areaType" label="类型">
          <template #default="{ row }">
            <el-tag :type="row.areaType === 1 ? 'primary' : 'info'">
              {{ getAreaTypeLabel(row.areaType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="parentName" label="上级区域" />
        <el-table-column prop="managerName" label="负责人" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'danger'">
              {{ row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        @current-change="handlePageChange"
        layout="total, prev, pager, next"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

const loading = ref(false)
const areaList = ref([])
const searchForm = reactive({
  keyword: ''
})
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
})

const getAreaTypeLabel = (type: number) => {
  const labels = {
    1: '楼栋',
    2: '楼层',
    3: '单元',
    4: '房间'
  }
  return labels[type] || '未知'
}

const loadAreas = () => {
  loading.value = true
  // 模拟数据
  areaList.value = [
    {
      id: 1,
      areaName: 'A栋',
      areaCode: 'A',
      areaType: 1,
      parentName: '-',
      managerName: '张三',
      status: 1
    },
    {
      id: 2,
      areaName: 'A栋1单元',
      areaCode: 'A-1',
      areaType: 3,
      parentName: 'A栋',
      managerName: '李四',
      status: 1
    }
  ]
  pagination.total = 2
  loading.value = false
}

const handleSearch = () => {
  pagination.page = 1
  loadAreas()
}

const handleReset = () => {
  searchForm.keyword = ''
  handleSearch()
}

const handlePageChange = (page: number) => {
  pagination.page = page
  loadAreas()
}

const handleAdd = () => {
  console.log('新增区域')
}

const handleEdit = (row: any) => {
  console.log('编辑区域', row)
}

const handleDelete = (row: any) => {
  console.log('删除区域', row)
}

onMounted(() => {
  loadAreas()
})
</script>

<style scoped>
.area-management {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}
</style>